<template>
  <div class="ast-test-event">
    <h1>{{ message }}</h1>
    <p>
        抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。
        也就是一种编程语言的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。
    </p>
    <p>作用:</p>
    <ul>
        <li>在javascript中，js引擎将js语句转化成AST树，再根据AST转换为字节码，最后提供给计算机。</li>
        <li>webpack、rollup、UglifyJS、Lint等很多的工具和库的核心通过Abstract Syntax Tree 抽象语法树这个概念来实现对代码的检查、分析等操作。</li>
    </ul>
    <p></p>
    <p>在线转换：<a href="https://esprima.org/demo/parse.html#">https://esprima.org/demo/parse.html#</a></p>
    <section>
        <h3>简单例子</h3>
        <p>先词法分析扫描得到token</p>
        <code>
            <pre>
                // 以 var answer = 'dai';为例
                // token 长这个样子
                [
                    {
                        "type": "Keyword",
                        "value": "var"
                    },
                    {
                        "type": "Identifier",
                        "value": "answer"
                    },
                    {
                        "type": "Punctuator",
                        "value": "="
                    },
                    {
                        "type": "String",
                        "value": "'dai'"
                    },
                    {
                        "type": "Punctuator",
                        "value": ";"
                    }
                ]
            </pre> 
        </code>
        <p>第二步转化成语法树，他会去掉不完整的括号等不重要的描述。</p>
        <code>
            <pre>
                {
                    "type": "Program",
                    "body": [
                        {
                        "type": "VariableDeclaration",
                        "declarations": [
                            {
                            "type": "VariableDeclarator",
                            "id": {
                                "type": "Identifier",
                                "name": "answer"
                            },
                            "init": {
                                "type": "Literal",
                                "value": "dai",
                                "raw": "'dai'"
                            }
                            }
                        ],
                        "kind": "var"
                        }
                    ],
                    "sourceType": "script"
                }
            </pre>
        </code>
    </section>
    <section>
        <h4>推荐阅读</h4>
        <ul>
            <li><a href="https://cheogo.github.io/learn-javascript/201709/runtime.html">JavaScript 语法解析、AST、V8、JIT</a></li>
            <li><a href="https://www.yuque.com/whilefor/feworld/2017-05-19">Abstract Syntax Tree 抽象语法树简介</a></li>
            <li><a href="https://segmentfault.com/a/1190000013126460">JavaScript到底是解释型语言还是编译型语言?</a></li>
        </ul>
    </section>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class proxy extends Vue {
        // data 在这
        message: string = 'AST抽象语法树'
    }
</script>
<style lang="scss">
.ast-test-event{
}
</style>